// 1号柱状图1模块
(function() {
  // 实例化对象
  var myChart = echarts.init(document.querySelector(".bar .chart"));
  // 指定配置和数据
  var option = {
    title: {
      text: '船舶基本信息柱状图',
      left: 'center',
      textStyle: {
        color: '#fff'
      },
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        let result = params[0].name + '<br/>';
        for (let i = 0; i < params.length; i++) {
          result += params[i].seriesName + '：' + params[i].value + 'm<br/>';
        }
        return result;
      }
    },
    legend: {
      bottom: '0%', // 降低图例的位置
      left: 'center',
      right:'center',
      data: ['长度', '宽度', '吃水深度'],
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '1%',
      right: '6%',
      bottom: '10%', // 增加底部边距，使图表内容更靠近底部
      top: '22%', // 减小顶部边距，使图表内容更靠近顶部
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['均值', '中位数', '最小值', '最大值', '标准差'],
      axisLabel: {
        color: '#fff',
        fontSize: '10' // 增大字体大小
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} m',
        color: '#fff',
        fontSize: '12' // 增大字体大小
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      name: '单位：m',
      nameTextStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '长度',
        type: 'bar',
        data: [577.80, 490.0, 0.0, 7770.0, 631.66],
        itemStyle: {
          color: 'rgb(84, 112, 198)'
        }
      },
      {
        name: '宽度',
        type: 'bar',
        data: [114.5, 110, 0, 740, 46.67],
        itemStyle: {
          color: 'rgb(145, 204, 117)'
        }
      },
      {
        name: '吃水深度',
        type: 'bar',
        data: [918.67, 0, 0, 24600, 2813.07],
        itemStyle: {
          color: 'rgb(231,75,75)'
        }
      }
    ]
  };

  // 把配置给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });

  // 数据变化
  $(".bar h2 ").on("click", "a", function() {
    option.series[0].data = dataAll[$(this).index()].data;
    myChart.setOption(option);
  });
})();

// 2号散点图定制
(function () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".line .chart"));

  // 从 index.vue 中提取的散点图配置
  const option = {
    title: {
      text: '船舶长度与宽度数据分布散点图',
      subtext: '数据来源: AIS',
      left: 'center',
      textStyle: {
        color: '#fff'
      },
      subtextStyle: {
        color: '#fff',
      }
    },
    grid: {
      left: '1%', // 缩小左右边距，让图形更宽
      right: '6%',
      bottom: '15%', // 增大底部边距，为图形留出更多空间
      top: '15%', // 减小顶部边距，让图形更高
      containLabel: true
    },
    tooltip: {
      // trigger: 'axis',
      showDelay: 0,
      formatter: function (params) {
        if (params.value.length > 1) {
          return (
              params.seriesName +
              ' :<br/>' +
              params.value[0] +
              'm ' +
              params.value[1] +
              'm '
          );
        } else {
          return (
              params.seriesName +
              ' :<br/>' +
              params.name +
              ' : ' +
              params.value +
              'm '
          );
        }
      },
      axisPointer: {
        show: true,
        type: 'cross',
        lineStyle: {
          type: 'dashed',
          width: 1
        }
      },
      textStyle: {
        color: '#fff'
      }
    },
    legend: {
      data: ['多用途船', '货船'],
      left: 'center',
      bottom: 1,
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: [
      {
        type: 'value',
        scale: true,
        axisLabel: {
          formatter: '{value} m',
          color: '#fff'
        },
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisTick: {
          lineStyle: {
            color: '#fff'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        scale: true,
        axisLabel: {
          formatter: '{value} m',
          color: '#fff'
        },
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisTick: {
          lineStyle: {
            color: '#fff'
          }
        }
      }
    ],
    series: [
      {
        name: '多用途船',
        type: 'scatter',
        emphasis: {
          focus: 'series'
        },
        symbolSize: 5, // 调整散点大小
        itemStyle: {
          color: 'rgb(231,75,75)' // 设置多用途船散点颜色为红色
        },
        data: [
          [440, 148], [553, 82], [612, 121], [90, 133],
          [691, 156], [436, 262], [602, 119], [450, 153],
          [715, 85], [648, 108], [437, 58], [405, 111],
          [558, 87], [640, 99], [737, 88], [787, 235],
          [343, 48], [360, 150], [373, 84], [675, 118],
          [713, 79], [321, 121], [593, 158], [463, 65],
          [459, 166], [601, 148], [511, 86], [683, 15],
          [692, 74], [666, 84], [347, 65], [665, 135],
          [602, 86], [615, 82], [415, 132], [670, 86],
          [235, 33], [523, 96], [616, 98], [864, 96],
          [418, 103], [700, 7], [567, 52], [906, 134],
          [784, 153], [833, 65], [595, 63], [553, 122],
          [487, 102], [543, 15], [814, 282], [770, 121],
          [426, 121], [511, 152], [719, 136], [622, 107],
          [655, 118], [327, 75], [692, 136], [568, 88],
          [519, 122], [910, 128], [485, 137], [476, 35],
          [359, 116], [593, 90], [486, 128], [484, 151],
          [498, 42], [601, 181], [403, 203], [758, 39],
          [798, 122], [752, 74], [660, 111], [688, 120],
          [997, 200], [655, 31], [395, 85], [733, 131],
          [577, 204], [720, 114], [650, 127], [715, 167],
          [511, 83], [508, 48], [589, 151], [324, 140],
          [673, 106], [178, 34], [738, 172], [674, 145],
          [579, 60], [355, 172], [611, 85], [422, 146],
          [377, 96], [595, 128], [756, 78], [325, 64],
          [589, 95], [774, 158], [738, 144], [723, 134],
          [429, 200], [658, 118], [272, 138], [551, 70],
          [729, 90], [850, 66], [767, 51], [618, 87],
          [467, 133], [313, 173], [311, 125], [669, 108],
          [142, 113], [633, 113], [731, 67], [205, 109],
          [346, 73], [396, 117], [317, 116], [704, 168],
          [926, 87], [615, 85], [367, 175], [708, 65],
          [870, 96], [513, 111], [634, 176], [648, 91],
          [478, 100], [518, 104], [342, 81], [512, 64],
          [469, 100], [761, 30], [732, 110], [755, 130],
          [531, 43], [665, 151], [505, 106], [515, 197],
          [598, 68], [566, 55], [507, 141], [1192, 54],
          [695, 101], [567, 261], [194, 62], [266, 67],
          [622, 109], [638, 70], [423, 28], [564, 32],
          [568, 118], [565, 23], [408, 117], [492, 41],
          [723, 47], [493, 89], [797, 96], [511, 169],
          [300, 129], [291, 84], [657, 88], [337, 126],
          [585, 150], [723, 78], [726, 12], [470, 131],
          [697, 93], [671, 173], [495, 49], [843, 79],
          [659, 189], [815, 130], [594, 51], [536, 189],
          [930, 175], [501, 69], [536, 108], [651, 64],
          [685, 125], [470, 71], [715, 52], [231, 126],
          [561, 134], [477, 110], [283, 67], [697, 74],
          [147, 12], [731, 101], [874, 132], [538, 170],
          [591, 116], [214, 86], [593, 119], [483, 105],
          [257, 56], [552, 113], [289, 86], [531, 158],
          [628, 106], [687, 147], [354, 203], [431, 84],
          [492, 69], [522, 87], [807, 75], [621, 190],
          [598, 164], [205, 18], [257, 140], [452, 182],
          [603, 119], [702, 79], [556, 118], [464, 175],
          [354, 231], [659, 174], [415, 63], [432, 47],
          [528, 168], [541, 78], [900, 86], [431, 195],
          [447, 100], [418, 131], [677, 142], [672, 71],
          [456, 106], [266, 89], [656, 95], [810, 94],
          [290, 137], [606, 106], [366, 120], [404, 148],
          [384, 104], [749, 90], [812, 119], [392, 97],
          [738, 142], [403, 40], [369, 70], [372, 103]
        ]
      },
      {
        name: '货船',
        type: 'scatter',
        emphasis: {
          focus: 'series'
        },
        symbolSize: 5, // 调整散点大小
        itemStyle: {
          color: 'rgb(145, 204, 117)' // 设置多用途船散点颜色为红色
        },
        data: [
          [737, 111], [803, 56], [362, 97], [742, 64]
              [465, 161], [437, 45], [866, 177], [415, 118]
              [414, 108], [81, 92], [565, 106], [509, 46]
              [378, 95], [539, 121], [1044, 87], [454, 186]
              [713, 108], [759, 108], [755, 120], [670, 150]
              [623, 167], [576, 100], [533, 92], [663, 131]
              [846, 208], [541, 22], [447, 199], [915, 79]
              [461, 192], [816, 151], [643, 59], [365, 138]
              [331, 32], [453, 111], [701, 166], [418, 143]
              [450, 179], [321, 76], [542, 109], [291, 144]
              [831, 113], [817, 62], [1009, 168], [639, 160]
              [328, 115], [494, 113], [501, 101], [209, 75]
              [740, 103], [634, 63], [427, 86], [366, 84]
              [549, 153], [585, 90], [589, 83], [173, 53]
              [614, 121], [423, 129], [293, 198], [764, 78]
              [644, 206], [583, 72], [287, 24], [534, 188]
              [690, 125], [260, 135], [768, 133], [434, 123]
              [602, 102], [924, 153], [562, 108], [622, 24]
              [512, 70], [523, 146], [327, 115], [913, 159]
              [223, 118], [879, 81], [1138, 215], [482, 39]
              [412, 108], [448, 124], [701, 140], [403, 56]
              [447, 47], [375, 82], [303, 86], [544, 45]
              [278, 160], [291, 167], [550, 124], [554, 122]
              [87, 127], [957, 59], [629, 73], [601, 50]
              [306, 110], [607, 126], [489, 16], [752, 153]
              [628, 117], [520, 55], [417, 165], [835, 199]
              [517, 111], [368, 120], [382, 60], [823, 134]
              [175, 164], [494, 121], [785, 92], [869, 76]
              [649, 33], [483, 108], [678, 85], [650, 103]
              [436, 156], [492, 104], [556, 147], [245, 115]
              [493, 77], [411, 153], [332, 100], [576, 67]
              [475, 153], [580, 132], [574, 193], [517, 116]
              [666, 89], [519, 86], [121, 165], [266, 143]
              [388, 118], [331, 72], [486, 47], [478, 104]
              [585, 246], [621, 117], [840, 53], [311, 163]
              [798, 148], [273, 135], [867, 69], [623, 191]
              [848, 197], [492, 30], [613, 127], [707, 103]
              [738, 5], [417, 98], [470, 96], [636, 65]
              [590, 123], [605, 87], [486, 118], [497, 80]
              [897, 110], [451, 115], [361, 71], [615, 68]
              [278, 105], [282, 127], [471, 84], [740, 34]
              [532, 70], [730, 50], [836, 136], [412, 26]
              [936, 121], [500, 125], [482, 101], [590, 115]
              [702, 124], [773, 149], [298, 158], [633, 91]
              [295, 105], [511, 43], [892, 121], [528, 109]
              [443, 196], [380, 78], [562, 157], [662, 190]
              [839, 143], [625, 138], [538, 101], [540, 89]
              [652, 116], [739, 109], [778, 107], [228, 135]
              [535, 160], [666, 120], [861, 128], [654, 115]
              [753, 96], [404, 136], [527, 49], [424, 111]
              [660, 152], [517, 208], [790, 139], [619, 135]
              [449, 28], [238, 59], [508, 104], [515, 143]
              [570, 120], [489, 182], [589, 179], [346, 158]
              [856, 170], [525, 211], [953, 86], [610, 27]
              [646, 165], [756, 85], [421, 103], [649, 97]
              [419, 148], [579, 201], [399, 141], [321, 107]
              [398, 98], [504, 105], [662, 184], [337, 161]
              [395, 143], [583, 192], [413, 34], [585, 88]
              [807, 59], [892, 142], [336, 220], [427, 135]
              [322, 175], [343, 30], [554, 120], [274, 119]
              [348, 152], [312, 108], [445, 101], [555, 136]
              [551, 50], [929, 99], [383, 134], [704, 225]
              [359, 68], [279, 96], [376, 175], [150, 23]
              [691, 77], [592, 162], [730, 119], [604, 137]
              [377, 31], [173, 79], [401, 206], [634, 43]
              [411, 190], [540, 51], [537, 187], [438, 170]
              [151, 181], [571, 167], [388, 120], [487, 83]
              [408, 134], [390, 181], [587, 173], [559, 114]
              [789, 92], [323, 155], [753, 112], [474, 127]
              [480, 116], [467, 136], [544, 159], [709, 249]
              [526, 157], [664, 110], [406, 134], [589, 93]
              [331, 199], [760, 162], [506, 179], [569, 138]
              [698, 149], [783, 105], [605, 100], [603, 85]
              [446, 56], [363, 98], [622, 108], [838, 96]
              [503, 90], [315, 143], [336, 106], [442, 196]
        ]
      }
    ]
  };

  // 把配置给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 饼图定制
(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".pie .chart"));

  option = {

    title: {
      text: '船舶类型饼状图',
      left: 'center',
      textStyle: {
        color: '#fff'
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
      position: function(p) {
        //其中p为当前鼠标的位置
        return [p[0] + 10, p[1] - 10];
      }
    },
    legend: {
      top: "90%",
      itemWidth: 10,
      itemHeight: 10,
      data: ["多用途船", "危险品船", "货船"],
      textStyle: {
        color: '#fff',
        fontSize: "12"
      }
    },
    series: [
      {
        name: "船舶分类及数量",
        type: "pie",
        center: ["50%", "50%"],
        radius: ["40%", "60%"],
        color: [
            "rgb(231,75,75)",
          "#065aab",
          "rgb(145, 204, 117)",
        ],
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value: 210, name: "多用途船" },
          { value: 50, name: "危险品船" },
          { value: 26, name: "货船" },
        ]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();

// 横向柱状图模块
(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".bar1 .chart"));

  var data = [56.72, 33.57, 5.05, 2.99, 1.67];
  var titlename = ["多用途船", "货船", "工程船", "公务船", "其他"];
  var valdata = [14327, 8481, 1276, 755, 422];
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  option = {
    title: {
      text: '船舶类型柱状图',
      left: 'center',
      textStyle: {
        color: '#fff'
      },
    },
    //图标位置
    grid: {
      top: "10%",
      left: "18%",
      right:"15%",
      bottom: "10%"
    },
    xAxis: {
      show: false,

    },
    yAxis: [
      {
        show: true,
        data: titlename,
        inverse: true,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#fff",

          rich: {
            lg: {
              backgroundColor: "#339911",
              color: "#fff",
              borderRadius: 15,
              // padding: 5,
              align: "center",
              width: 15,
              height: 15
            }
          }
        }
      },
      {
        show: true,
        inverse: true,
        data: valdata,
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: "#fff"
          },
          formatter: function (value) {
            return value + '条'; // 添加单位“条”
          },
        }
      }
    ],
    series: [
      {
        name: "条",
        type: "bar",
        yAxisIndex: 0,
        data: data,
        barCategoryGap: 50,
        barWidth: 10,
        itemStyle: {
          normal: {
            barBorderRadius: 20,
            color: function(params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num];
            }
          }
        },
        label: {
          normal: {
            show: true,
            position: "insideRight",
            distance:-55,
            formatter: "{c}%"
          }
        }
      },
      {
        name: "框",
        type: "bar",
        yAxisIndex: 1,
        barCategoryGap: 50,
        data: [100, 100, 100, 100, 100],
        barWidth: 15,
        itemStyle: {
          normal: {
            color: "none",
            borderColor: "#00c1de",
            borderWidth: 3,
            barBorderRadius: 15
          }
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();

// 5号折线图
(function() {
  var myChart = echarts.init(document.querySelector(".line1 .chart"));
  var shipData = [
    { SHIP_TYPE_CODE: 'LNG 动力船', SHIP_GROSS_TON: 1165.833333, SHIP_BREADTH: 11.799167 },
    { SHIP_TYPE_CODE: '公务船', SHIP_GROSS_TON: 414.896649, SHIP_BREADTH: 7.175483 },
    { SHIP_TYPE_CODE: '危险品船', SHIP_GROSS_TON: 662.000000, SHIP_BREADTH: 10.030889 },
    { SHIP_TYPE_CODE: '多用途船', SHIP_GROSS_TON: 921.955965, SHIP_BREADTH: 11.723343 },
    { SHIP_TYPE_CODE: '客船', SHIP_GROSS_TON: 123.633232, SHIP_BREADTH: 5.689545 },
    { SHIP_TYPE_CODE: '工程船', SHIP_GROSS_TON: 325.960815, SHIP_BREADTH: 10.131089 },
    { SHIP_TYPE_CODE: '干货船', SHIP_GROSS_TON: 760.180000, SHIP_BREADTH: 11.654600 },
    { SHIP_TYPE_CODE: '散装水泥运输船', SHIP_GROSS_TON: 996.714286, SHIP_BREADTH: 12.802857 },
    { SHIP_TYPE_CODE: '散货船', SHIP_GROSS_TON: 1586.596330, SHIP_BREADTH: 14.315596 },
    { SHIP_TYPE_CODE: '测试船舶', SHIP_GROSS_TON: 1.000000, SHIP_BREADTH: 21.000000 },
    { SHIP_TYPE_CODE: '货船', SHIP_GROSS_TON: 1005.626459, SHIP_BREADTH: 12.151746 }
  ];
  var xAxisData = shipData.map(item => item.SHIP_TYPE_CODE);
  var shipGrossTonData = shipData.map(item => item.SHIP_GROSS_TON);
  var shipBreadthData = shipData.map(item => item.SHIP_BREADTH);

  option = {
    title: {
      text: '船舶信息折线图',
      left: 'center',
      textStyle: { color: '#fff' }
    },
    color: ['red', 'yellow'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross', crossStyle: { color: '#fff' } },
      textStyle: { color: '#fff' },
      backgroundColor: 'rgba(0, 0, 0, 0.8)'
    },
    // 新增图例位置配置
    legend: {
      data: ['船舶总吨位', '船舶宽度'],
      textStyle: { color: '#fff' },
      bottom: '0%', // 图例位于图表底部
      left: 'center', // 水平居中
      orient: 'horizontal' // 水平排列
    },
    // 调整坐标系位置
    grid: {
      top: '25%', // 顶部边距扩大，留出标题和图例空间
      bottom: '20%', // 底部边距扩大，防止图形与坐标轴标签重叠
      left: '15%',
      right: '15%'
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLabel: { color: '#fff' },
      axisLine: { lineStyle: { color: '#fff' } },
      axisTick: { lineStyle: { color: '#fff' } }
    },
    yAxis: [
      {
        type: 'value',
        name: '船舶总吨位(吨)',
        axisLabel: { formatter: '{value}', color: '#fff' },
        axisLine: { lineStyle: { color: '#fff' } },
        axisTick: { lineStyle: { color: '#fff' } },
        splitLine: { lineStyle: { color: '#fff' } }
      },
      {
        type: 'value',
        name: '船舶宽度(m)',
        axisLabel: { formatter: '{value}', color: '#fff' },
        axisLine: { lineStyle: { color: '#fff' } },
        axisTick: { lineStyle: { color: '#fff' } },
        splitLine: { lineStyle: { color: '#fff' } }
      }
    ],
    series: [
      {
        name: '船舶总吨位',
        type: 'line',
        yAxisIndex: 0,
        data: shipGrossTonData,
        itemStyle: { color: 'red' },
        lineStyle: { color: 'red' }
      },
      {
        name: '船舶宽度',
        type: 'line',
        yAxisIndex: 1,
        data: shipBreadthData,
        itemStyle: { color: 'yellow' },
        lineStyle: { color: 'yellow' }
      }
    ]
  };

  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();

// 6号点位分布统计模块
(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pie1  .chart"));
  // 2. 指定配置项和数据
  var option = {
    title: {
      text: '船舶目的地玫瑰图',
      left: 'center',
      textStyle: { color: '#fff' }
    },
    color: ['red', 'yellow'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross', crossStyle: { color: '#fff' } },
      textStyle: { color: '#fff' },
      backgroundColor: 'rgba(0, 0, 0, 0.8)'
    },
    legend: {
      top: "90%",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // 注意颜色写的位置
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff",
      "#5d1dff",
      "#ffa51d"
    ],
    series: [
      {
        name: "船舶数目",
        type: "pie",
        // 如果radius是百分比则必须加引号
        radius: ["9%", "60%"],
        center: ["50%", "50%"],
        roseType: "radius",
        data: [
          { value: 1245, name: '广州' },
          { value: 1207, name: '新会' },
          { value: 1070, name: '香洲' },
          { value: 946, name: '东莞' },
          { value: 796, name: '中山' },
          { value: 789, name: '梧州' },
          { value: 770, name: '贵港' },
          { value: 702, name: '肇庆' },
          { value: 603, name: '平南' },
          { value: 581, name: '广州南山' }
        ],
        // 修饰饼形图文字相关的样式 label对象
        label: {
          fontSize: 10
        },
        // 修饰引导线样式
        labelLine: {
          // 连接到图形的线长度
          length: 10,
          // 连接到文字的线长度
          length2: 10
        }
      }
    ]
  };

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();
